<template>
  <div style="display: flex; align-items: center">
    <IconifyIconOnline
      :icon="icon.name"
      :style="{ background: icon.bgc, color: icon.color }"
    />
    <div style="margin: 0 40px">
      <el-text>选择背景色：</el-text>
      <el-color-picker v-model="icon.bgc" />
    </div>
    <div style="display: flex; align-items: center">
      <el-button v-popover="popoverRef" v-click-outside="onClickOutside"
        >选择图标：<el-icon><ArrowDown /></el-icon
      ></el-button>
      <el-popover
        ref="popoverRef"
        placement="bottom-start"
        width="402"
        trigger="click"
        virtual-triggering
        persistent
      >
        <div class="w-icons">
          <IconifyIconOnline
            class="w-icons-ico"
            v-for="ico in iconList"
            :key="ico"
            :icon="ico"
            @click="icon.name = ico"
          />
          <div
            v-for="(i, index) in 12"
            :key="index"
            style="width: 31px; height: 0"
          />
        </div>
        <template #reference>
          <IconifyIconOnline
            class="w-p-icon"
            style="padding: 0"
            :icon="icon.name"
          />
        </template>
      </el-popover>
    </div>
  </div>
</template>
<script setup lang="ts" name="IconSetting">
import { iconList } from "./Icon";
import type { IconDefine } from "./Icon";
import { ClickOutside as vClickOutside } from "element-plus";

const icon = defineModel<IconDefine>();
const popoverRef = ref(null);

const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.();
};
</script>
<style lang="scss" scoped>
.w-p-icon {
  font-size: 20px;
  color: var(--el-color-info);
  cursor: pointer;
}

.w-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: 400px;
  padding: 2px;
  overflow: auto;

  .w-icons-ico {
    width: 25px;
    height: 25px;
    padding: 3px;
    cursor: pointer;
    border-radius: 2px;

    &:hover {
      box-shadow: 0 0 3px 0 #9b9595;
    }
  }
}
</style>
